<script setup lang="ts">

import {useUserStore} from "@/stores/user";
import pinia from "@/stores";
import {useRouter} from "vue-router";

const router = useRouter();

const onCommand = (command: string) => {
  if (!command) return;
  if (command === "logout") {
    onLogout()
  }
}
const onLogout = () => {
  useUserStore(pinia).logout()
  router.push("/login");
}
</script>
<template>
  <el-dropdown @command="onCommand">
    <div class="new-user-head">
      <el-avatar icon="Plus" shape="square" fit="fill" />
    </div>
    <template #dropdown>
      <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
      <el-dropdown-item command="logout">退出登录</el-dropdown-item>
    </template>
  </el-dropdown>
</template>
<style scoped>
.new-user-head{
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.new-user-head:hover{
  border-left: 1px solid var(--el-border-color);
  width: 47px;
}
::v-deep(.el-avatar){
  height: 32px;
  width: 32px;
  transition: 3ms;
}
::v-deep(.el-avatar:hover){
  height: 40px;
  width: 40px;
  transition: 3ms;
}
::v-deep(.el-avatar--square){
  border-radius: unset;
}
</style>